<template>
  <view class="shortcuts-card box-border p-[28rpx] mb-[28rpx] bg-white shadow-1 rounded-2">
    <view class="flex items-center justify-between">
      <view class="rest-name text-[#000] text-size-3">我的订单</view>
    </view>
    <view class="flex items-center justify-center mt-3">
      <view
        class="card-item flex-col flex-1 center"
        v-for="item in cardItemList"
        :key="item.value"
      >
        <view class="img-box center w-112rpx h-112rpx">
          <image class="w-72rpx  img" mode="widthFix" :src="item.imgUrl" alt=""></image>
        </view>
        <view class="label color-text-1 text-size-1 text-center mt-[6rpx]">
          {{ item.label }}
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const cardItemList = ref([
  {
    value: 1,
    label: "全部",
    imgUrl: "/static/images/mine/all.png",
  },
  {
    value: 1,
    label: "待付款",
    imgUrl: "/static/images/mine/pay-pending.png",
  },
  {
    value: 1,
    label: "待发货",
    imgUrl: "/static/images/mine/receipt.png",
  },
  {
    value: 1,
    label: "待收货",
    imgUrl: "/static/images/mine/await-receive.png",
  },
  {
    value: 1,
    label: "已完成",
    imgUrl: "/static/images/mine/done.png",
  },
]);
const handleClick = (url) => {
  uni.navigateTo({ url });
};
</script>
